<template>
<div style="background:#F0F0F0;padding-bottom:65px;">
  <div class="div_base">
    <span class="my_span">门店</span>
    <span style="margin-left:10px;" v-text="shop_name"></span>
  </div>

  <div class="my_div1">
    <van-row>
      <van-col span="24">
        <!-- <van-col span="16"> -->
        <div class="input_div">
          <input type="digit" focus="focus"  @blur="blur" class="my_input" placeholder-class="my_input_placeholder"  v-model="amount" placeholder="请输入金额（元）"/>
                    </div>
      </van-col>
    </van-row>
  </div>

  <div class="my_div">
    <radio-group class="radio-group" v-model="form.pay_type" @change="typeChange">
      <label class="radio" style="display:block;padding: 15px;" >
                      <div class="zan-icon" :class="'zan-icon-wechat'" style="color: #EE4000;margin-right:10px"></div>
                        微信支付
                        <radio value="wechat_pay" checked="true" style="float:right;"/>
                    </label>
      <div style="height:1px;background-color:#f0f0f0;" />
      <label class="radio"  style="display:block;padding: 15px;" v-if="user.is_vip=='Y'">
      <!-- <label class="radio"  style="display:block;padding: 10px 10px 10px 10px;"> -->
                  <div class="zan-icon" :class="'zan-icon-card'" style="color: #EE4000;margin-right:10px"></div>
                    会员支付
                    <radio value="card_pay" style="float:right;"/>
                </label>
    </radio-group>
  </div>

  <div class="div_base" v-if="user.is_vip=='Y'" style="padding:15px;">
    <span>会员</span>
    <div class="div_line" />
    <span class="my_span">卡&nbsp;&nbsp;&nbsp;号</span>
    <span style="margin-left:10px;" v-text="user.card_no"></span>
    <div class="div_line" />
    <span class="my_span">余&nbsp;&nbsp;&nbsp;额</span>
    <span style="margin-left:10px;" v-text="user.balance/100"> 元</span>
    <div class="div_line" />
    <div @click="selectCoupon" style="vertical-align:middle;text-aglin:center;">
      <span class="my_span" >优惠券</span>
      <span style="margin-left:10px;" v-text="coupon_name"></span>
      <span  class="my_span" style="float:right;" >点击选择&gt;</span>
    </div>
  </div>

  <div class="div_base" v-if="user.is_vip=='Y'" style="padding:15px;margin-bottomo:65px;">
    <span>优惠</span>
    <div class="div_line" />
    <div v-show="discount1.show">
      <span class="my_span" v-text="discount1.item_name"></span>
      <span style="margin-left:10px;" v-text="discount1.item_count/100"> 元</span>
      <div class="div_line" />
    </div>

    <div v-show="discount2.show">
      <span class="my_span" v-text="discount2.item_name"></span>
      <span style="margin-left:10px;" v-text="discount2.item_count/100"> 元</span>
      <div class="div_line" />
    </div>

    <div v-show="discount3.show">
      <span class="my_span" v-text="discount3.item_name"></span>
      <span style="margin-left:10px;" v-text="discount3.item_count/100"> 元</span>
      <div class="div_line" />
    </div>

  </div>

  <div class="operate-bar">
    <div class='gouwuche'>
      <div style="float:left;padding-left:10px;">实付金额</div>
      <span style="float:bottom;color:#ee4000;font-size:14px;margin-left:10px;">￥ </span>
      <span  style="color:#ee4000;" v-text="pay_amount/100"></span>
    </div>

    <div class="submit-btn" @click='pay'>
      <div class="submit-btn-label">确定</div>
    </div>
  </div>
</div>
</template>

<script>
import {
  mapActions,
  mapGetters
} from 'vuex'
import api from '@/utils/api'

export default {
  data() {
    return {
      form: {
        pay_type: 'wechat_pay',
        sub_item_total: ""
      },
      amount: "",
      focus: true,
      shop_name: '岳庭店',
      scene: "",
      select_coupon: '点击选择',
      coupon_name: '',
      discount1: {
        show: false
      },
      discount2: {
        show: false
      },
      discount3: {
        show: false
      },
      pay_amount: 0
    }
  },
  computed: {
    ...mapGetters([
      'user',
      'micro_pay_coupon'
    ]),
  },
  onUnload() {
    console.log("onUnload");
    this.cleanData()
  },
  onShow() {
    console.log('onShow')
    // if (this.micro_pay_coupon && this.micro_pay_coupon.id > 0) {
    this.blur()
    if (this.micro_pay_coupon) {
      this.coupon_name = this.micro_pay_coupon.title
    }
    // }
  },
  onLoad(options) {
    if (options) {
      if (options.scene) {
        this.scene = decodeURIComponent(options.scene)
      }
    }
  },
  beforeMount() {
    if (!this.user || !this.user.id) {
      let url = 'get_user_info?callback_url=micro_pay&scene=' + this.scene
      wx.redirectTo({
        url: url
      })
      return
    }
    if (!this.scene) {
      this.scene = this.user.scene
    }
    this.getShop()
    this.form.brand_id = this.user.brand_id
    if (this.user.is_vip == 'Y') {
      this.form.user_id = this.user.id
    }
    this.form.open_id = this.user.open_id
    this.form.brand_id=this.user.brand_id
  },
  methods: {
    getShop() {
      let self = this
      api.getShop({
        shop_id: this.scene
      }).then(res => {
        self.form.shop_id = res.data.id
        self.form.shop_name = res.data.name
        self.shop_name = res.data.name
        // self.form.shop_id=res.data.id
      })
    },
    selectCoupon() {
      let sub_item_total = parseInt(parseFloat(this.amount) * 100)
      if (!sub_item_total || sub_item_total == 0) {
        wx.showToast({
          title: '请输入金额',
          icon: 'none'
        })
        return
      }
      let url = "micro_pay_coupon?shop_id=" + this.scene + "&sub_item_total=" + sub_item_total
      // 回调页面
      wx.navigateTo({
        url: url
      })
    },
    pay() {
      let self = this
      console.log(this.form)
      // console.log(encodeURIComponent("中国年问"))
      if (!this.amount) {
        wx.showToast({
          title: '请输入付款金额',
          icon: 'none'
        })
        return
      }
      if (isNaN(this.amount)) {
        wx.showToast({
          title: '付款金额有误',
          icon: 'none'
        })
        return
      }
      // wx.showToask({title:this.amount})
      // this.form.sub_item_total*=100
      this.form.sub_item_total = parseInt(parseFloat(this.amount) * 100)
      console.log(this.micro_pay_coupon)
      if (this.micro_pay_coupon && this.micro_pay_coupon.id > 0) {
        this.form.coupon_id = this.micro_pay_coupon.id
      } else {
        this.form.coupon_id = 0
      }
      api.microPay(this.form).then(res => {
        if (res.code == 0) {
          if (this.form.pay_type == "wechat_pay") {
            // wx.requestPayment({
            //   "nonceStr":"1540794614837070800","outTradeNo":"a9e390dece9649d8b0853e1c49bf2a1e","package":"prepay_id=wx29143014782669aded2e29381605772208","paySign":"B8C71CE26EA11AEFF0BF7DC61C270048","signType":"MD5","timeStamp":"1540794614",
            //   success(result) {
            //     wx.showToast({
            //       title: '支付成功',
            //       icon: 'success'
            //     })
            //     self.cleanData()
            //     self.refreshUser()
            //   },
            //   fail(result) {
            //     console.log('支付失败：', result)
            //   }
            // })
            wx.requestPayment({
              'timeStamp': res.data.timeStamp,
              'nonceStr': res.data.nonceStr,
              'package': res.data.package,
              'signType': res.data.signType,
              'paySign': res.data.paySign,
              success(result) {
                wx.showToast({
                  title: '支付成功',
                  icon: 'success'
                })
                self.cleanData()
                self.refreshUser()
              },
              fail(result) {
                console.log('支付失败：', result)
              }
            })
          } else {
            wx.showToast({
              title: '支付成功',
              icon: 'success'
            })
            self.cleanData()
            self.refreshUser()
          }
        }
      })
    },
    typeChange(e) {
      this.form.pay_type = e.target.value
    },
    focusAmount() {
      console.log(1)
      this.focus = true
      console.log(this.focus)
    },
    onInput() {
      console.log(input)
      this.amount = parseInt(parseFloat(this.amount))
    },
    blur(e) {
      // console.log(e)
      if (this.user.is_vip == "N") {
        return
      }
      if (!this.amount) {
        return
      }
      let self = this
      this.amount = parseFloat(this.amount)
      let amount = parseInt(this.amount * 100)

      let form = {
        shop_id: this.scene,
        user_id: this.user.id,
        pay_amount: amount,
        // coupon_id:
      }
      if (this.micro_pay_coupon && this.micro_pay_coupon.id > 0) {
        // 选择了优惠券
        form.coupon_id = this.micro_pay_coupon.id
      }
      api.getPayCenterMricoPrepay(form).then(res => {
        if (res.code == 0) {
          this.pay_amount = res.data.pay_amount
          res.data.item.forEach(function(item, index) {
            console.log(index)
            if (index == 0) {
              self.discount1 = {
                show: true,
                item_name: item.item_name,
                item_count: -item.item_count,
              }
            }
            if (index == 1) {
              self.discount2 = {
                show: true,
                item_name: item.item_name,
                item_count: -item.item_count,
              }
            }
            if (index == 2) {
              self.discount3 = {
                show: true,
                item_name: item.item_name,
                item_count: -item.item_count,
              }
            }
          })
        }
      })
    },
    cleanMircoPayCoupon() {
      // this.micro_pay_coupon.id = 0
      // this.micro_pay_coupon.title = ''
      this.$store.dispatch("setMicroPayCoupon", null)
    },
    cleanData() {
      this.cleanMircoPayCoupon()
      // this.amount = null
      this.amount = ""
      this.coupon_name = ""
      // this.$set(this.form,"amount", null)
      // this.$set(this.form,"amount", "")
      // this.$set(this.micro_pay_coupon,"title", "")
      this.pay_amount = 0
      this.discount1 = {
        show: false
      }
      this.discount2 = {
        show: false
      }
      this.discount3 = {
        show: false
      }
    },
    refreshUser() {
      api.getUserByOpenid({
        openid: this.user.open_id
      }).then(res => {
        if (res.code == 0) {
          this.$store.dispatch('setUser', res.data)
        }
      })
    },
    click1(a, b) {
      console.log(a, b)
    },
  }
}
</script>

<style>
page {
  background: #f0f0f0;
}

.my_input {
  /* margin-top: 10px; */
  display: block;
  margin-left: 20px;
  font-size: 40px;
  height: 60px
}

.my_input_placeholder {
  color: #CFCFCF;
  font-size: 25px;
}

/* 使用webkit内核的浏览器 */
/* IE浏览器 */

.my_body {
  background-color: #002300;
}

.my_div {
  background-color: #ffffff;
  margin: 10px 10px 0px 10px;
  /* padding: 10px; */
  /* border:1px solid #ffffff */
}

.my_div1 {
  background-color: #ffffff;
  margin: 0px 10px 0px 10px;
}

.pay_span {
  color: #CFCFCF;
}

.pay_div {
  background-color: #EE4000;
  text-align: center;
  height: 60px;
  line-height: 60px;
  /* float: right; */
  /* margin: 10px;
  postion:fixed;
  bottom:0; */
}

.input_div {
  /* background-color: #EE4000; */
  /* padding-bottom: 10px; */
  /* text-align: center; */
  height: 60px;
  line-height: 60px;
}

.my_span {
  color: #CFCFCF;
}

.div_line {
  height: 1px;
  background-color: #f0f0f0;
  margin-top: 10px;
  margin-bottom: 10px;
}

.div_base {
  padding: 20px;
  background: #ffffff;
  margin: 10px;
}

.div_base_pay {
  /* padding: 20px; */
  background: #ffffff;
  margin: 10px;
}

.operate-bar {
  z-index: 1001;
  position: fixed;
  bottom: 0px;
  height: 55px;
  line-height: 55px;
  width: 100%;
  display: flex;
}

.gouwuche {
  width: 70%;
  background: white;
  height: 100%;
}

.submit-btn {
  height: 100%;
  background-color: #ce4000;
  width: 30%;
  display: flex;
}

.submit-btn-label {
  color: white;
  font-size: 20px;
  margin: auto;
}
</style>
